<template>
<div class="content" :style='{"minHeight":"100vh","padding":"0px","background":"url(http://codegen.caihongy.cn/20230414/c294e7815ede4f498ef5df52f1fb482c.png) no-repeat center top / 100% 100%"}'>
	<div class="text" :style='{"margin":"50px auto","fontSize":"24px","color":"rgb(51, 51, 51)","textAlign":"center","fontWeight":"bold"}'>欢迎使用 {{this.$project.projectName}}</div>
    <div class="cardView">
        <div class="cards" :style='{"margin":"0 0 20px 0","alignItems":"center","justifyContent":"center","display":"flex"}'>
			<div :style='{"boxShadow":"0 1px 6px rgba(0,0,0,.3)","margin":"0 10px","borderRadius":"40px","display":"flex"}' v-if="isAuth('keyanxiangmu','首页总数')">
				<div :style='{"width":"80px","borderRadius":"40px","background":"#1ba7a6","height":"80px"}'></div>
				<div :style='{"width":"160px","alignItems":"center","flexDirection":"column","justifyContent":"center","display":"flex"}'>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"20px","color":"#333","fontWeight":"bold","height":"24px"}'>{{keyanxiangmuCount}}</div>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"16px","color":"#666","height":"24px"}'>科研项目总数</div>
				</div>
			</div>
			<div :style='{"boxShadow":"0 1px 6px rgba(0,0,0,.3)","margin":"0 10px","borderRadius":"40px","display":"flex"}' v-if="isAuth('xiangmucanyu','首页总数')">
				<div :style='{"width":"80px","borderRadius":"40px","background":"#1ba7a6","height":"80px"}'></div>
				<div :style='{"width":"160px","alignItems":"center","flexDirection":"column","justifyContent":"center","display":"flex"}'>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"20px","color":"#333","fontWeight":"bold","height":"24px"}'>{{xiangmucanyuCount}}</div>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"16px","color":"#666","height":"24px"}'>项目参与总数</div>
				</div>
			</div>
			<div :style='{"boxShadow":"0 1px 6px rgba(0,0,0,.3)","margin":"0 10px","borderRadius":"40px","display":"flex"}' v-if="isAuth('xiangmuchengguo','首页总数')">
				<div :style='{"width":"80px","borderRadius":"40px","background":"#1ba7a6","height":"80px"}'></div>
				<div :style='{"width":"160px","alignItems":"center","flexDirection":"column","justifyContent":"center","display":"flex"}'>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"20px","color":"#333","fontWeight":"bold","height":"24px"}'>{{xiangmuchengguoCount}}</div>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"16px","color":"#666","height":"24px"}'>项目成果总数</div>
				</div>
			</div>
        </div>
        <div style="display: flex;align-items: center;width: 100%;margin-bottom: 10px;">
            <el-card style="width: 33.3%;margin: 0 10px;" v-if="isAuth('keyanxiangmu','首页统计')">
                <div id="keyanxiangmuChart1" style="width:100%;height:400px;"></div>
            </el-card>
            <el-card style="width: 33.3%;margin: 0 10px;" v-if="isAuth('xiangmucanyu','首页统计')">
                <div id="xiangmucanyuChart1" style="width:100%;height:400px;"></div>
            </el-card>
            <el-card style="width: 33.3%;margin: 0 10px;" v-if="isAuth('xiangmuchengguo','首页统计')">
                <div id="xiangmuchengguoChart1" style="width:100%;height:400px;"></div>
            </el-card>
        </div>
    </div>
</div>
</template>
<script>
//3
import router from '@/router/router-static'
import * as echarts from 'echarts'
export default {
	data() {
		return {
            keyanxiangmuCount: 0,
            xiangmucanyuCount: 0,
            xiangmuchengguoCount: 0,
		};
	},
  mounted(){
    this.init();
    this.getkeyanxiangmuCount();
    this.keyanxiangmuChat1();
    this.getxiangmucanyuCount();
    this.xiangmucanyuChat1();
    this.getxiangmuchengguoCount();
    this.xiangmuchengguoChat1();
  },
  methods:{
    init(){
        if(this.$storage.get('Token')){
        this.$http({
            url: `${this.$storage.get('sessionTable')}/session`,
            method: "get"
        }).then(({ data }) => {
            if (data && data.code != 0) {
            router.push({ name: 'login' })
            }
        });
        }else{
            router.push({ name: 'login' })
        }
    },
    getkeyanxiangmuCount() {
        this.$http({
            url: `keyanxiangmu/count`,
            method: "get"
        }).then(({
            data
        }) => {
            if (data && data.code == 0) {
                this.keyanxiangmuCount = data.data
            }
        })
    },

    keyanxiangmuChat1() {
      this.$nextTick(()=>{

        var keyanxiangmuChart1 = echarts.init(document.getElementById("keyanxiangmuChart1"),'cool');
        this.$http({
            url: "keyanxiangmu/group/keyanleibie",
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].keyanleibie);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].keyanleibie
                    })
                }
                var option = {};
                option = {
                        title: {
                            text: '科研类别统计',
                            left: 'center'
                        },
                        tooltip: {
                          trigger: 'item',
                          formatter: '{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: ['25%', '55%'],
                                center: ['50%', '60%'],
                                data: pArray,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                };
                // 使用刚指定的配置项和数据显示图表。
                keyanxiangmuChart1.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    keyanxiangmuChart1.resize();
                };
            }
        });
      })
    },






    getxiangmucanyuCount() {
        this.$http({
            url: `xiangmucanyu/count`,
            method: "get"
        }).then(({
            data
        }) => {
            if (data && data.code == 0) {
                this.xiangmucanyuCount = data.data
            }
        })
    },

    xiangmucanyuChat1() {
      this.$nextTick(()=>{

        var xiangmucanyuChart1 = echarts.init(document.getElementById("xiangmucanyuChart1"),'bee-inspired');
        this.$http({
            url: "xiangmucanyu/group/xiangmumingcheng",
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].xiangmumingcheng);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].xiangmumingcheng
                    })
                }
                var option = {};
                option = {
                    title: {
                        text: '项目申请统计',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis,
                        axisLabel : {
                            rotate:70
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'bar'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                xiangmucanyuChart1.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    xiangmucanyuChart1.resize();
                };
            }
        });
      })
    },






    getxiangmuchengguoCount() {
        this.$http({
            url: `xiangmuchengguo/count`,
            method: "get"
        }).then(({
            data
        }) => {
            if (data && data.code == 0) {
                this.xiangmuchengguoCount = data.data
            }
        })
    },

    xiangmuchengguoChat1() {
      this.$nextTick(()=>{

        var xiangmuchengguoChart1 = echarts.init(document.getElementById("xiangmuchengguoChart1"),'carp');
        this.$http({
            url: `xiangmuchengguo/value/xueshengxingming/chengguoshuliang`,
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].xueshengxingming);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].xueshengxingming
                    })
                }
                var option = {};
                option = {
                    title: {
                        text: '科研成果统计',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis,
                        axisLabel : {
                            rotate:70
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'bar'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                xiangmuchengguoChart1.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    xiangmuchengguoChart1.resize();
                };
            }
        });
      })
    },






  }
};
</script>
<style lang="scss" scoped>
    .cardView {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .cards {
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 10px;
            justify-content: center;
            .card {
                width: calc(25% - 20px);
                margin: 0 10px;
                :v-deep.el-card__body{
                    padding: 0;
                }
            }
        }
    }
</style>
